<?php
	$googleKey = "ABQIAAAAXO3kGojnOzps3MturbEb-xRsX8AU9oaVVrf0k2tus5sTAWBLwhSrvfg7pDtl1qcaoOCkTcc7sSOhSA";
?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr" dir="ltr">
	<head>
        <base href="/tweenSheet" />
        
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<title>TweenSheet, Mass Animation Script</title>
		<link rel="stylesheet" type="text/css" media="all"  href="css/default.css" />
		<script type="text/javascript" src="js/before.js"></script>
	</head>
	<body class="dynBg">
		<ul class="wcag">
			<li><a href="#mainCtn" class="scrollToAnchor">Aller au contenu</a></li>
		</ul>
		<div id="header">
			<img src="/img/logo.png" lang="en" alt="TweenSheet, mass animation script" id="logo" class="dynBg"/>
			<ul id="tools">
				<li>
					<a href="en/">English version</a>
				</li>
				<li>
					<a href="cv/">Qui suis-je ?</a>
				</li>
				<li>
					<a href="contact/">Me contacter</a>
					
				</li>
			</ul>
		</div>
		<div class="page">
			<h1 class="dynBg">TweenSheet, mass animation script, c'est quoi ?</h1>
			
			<p>TweenSheet est une solution javaScript pour faire de l'animation de masse, avec n'importe quel sélecteur (oui oui CSS3 aussi !) et n'importe quelle propriété CSS (les CSS3 aussi !)</p>
			<p>Cliquez sur le bouton, pour voir un exemple d'utilisation
				<button id="couleur" title="Le code exécuté au clic sur ce bouton nécéssite javascript">Choisissez votre couleur</button>
			</p>
			<p>A l'éxécution, vous remarquerez que l'animation est parfaitement synchrone !</p>
			<p>Cet exemple utlise le fameux <a href="http://moorainbow.woolly-sheep.net/">MooRainbow</a>, <span lang="en">color picker</span> bien fait et efficace.</p>
			<h2 class="dynBg">C'est quoi une animation de masse?</h2>
			<p>Ce que j'appelle une animation de masse, est une animation lancée simultanément sur plusieurs élements du DOM.</p>
			<p>Pour les librairies javaScript actuelle, lancer une animation sur plusieurs éléments revient à modifier l'attribut style de chacun des éléments au sein d'une boucle (type for, while...).</p>
			<p>Le navigateur doit donc gérer:</p>
				<ul>
					<li>les itérations de la boucle</li>
					<li>des accès DOM </li>
					<li>le rendu CSS en fonction de chaque propriété de l'attribut style</li>
				</ul>
			<p>Autant dire, que si le nombre d'éléments est un peu trop nombreux, la fluidité de l'animation risque d'étre problématique.</p>
			
			<p>Par exemple, avec MooTools, vous devriez faire quelquechose comme ça:</p>
			
			<p class="code">
var elements = $$(".myElements");
elements.each(function (elm){
	new Fx.Morph(elm).start({
		"width": 500,
		"height": 500,
		"background-color": #000000
	});
})
			</p>
			
			<p>C'est à dire que la class Fx.Morph sera instanciée autant de fois qu'il y a d'éléments avec la class css "myElements", engendrant ainsi une multiplication des accès DOM.</p>
			<p>Sur une page classique, je dirai qu'au delà de 10 éléments, les choses se compliquent.</p>
			
			<h2 class="dynBg">Qu'apporte TweenSheet</h2>
			<p>Le moteur d'animation de TweenSheet est différent:</p>
			<p>Plutôt que de modifier l'attribut style de chaque élément, TweenSheet va écrire directement dans une feuille de style, générée dynamiquement.</p>
			<h3 class="dynBg">Les avantages</h3>
			<ul>
				<li>Les accès au DOM sont peu nombreux</li>
				<li>Le nombre d'accès au DOM est le même pour 1 élement ou pour 10000</li>
				<li>La syntaxe permet la prise en charge des propriétes CSS3 du type "transform:rotate(45deg)" ou "border-radius:10px".</li>
				<li>Le script permet d'ajouter très facilement le préfixe propriétaire du navigateur (-moz-, -webkit- ...).</li>
			</ul>
			<h3 class="dynBg">Les inconvénients</h3>
			<ul>
				<li>Les propriétes CSS animées doivent être au départ de l'animation identique pour tous les éléments</li>
				<li>La syntaxe ne permet pas actuellement de faire des animations sur plus d'un paramêtre à la fois</li>
			</ul>
			<p>TweenSheet existe aujourd'hui en tant que class MooTools, basé sur la class Fx.CSS.</p>
			<p>Ce script sera porté en jQuery ou de façon autonome (sans être accolé à une librairie), mais un peu plus tard...</p>
			
			<h2 class="dynBg">En savoir plus...</h2>
			<p>Vous pouvez suivre les liens suivants pour explorer un peu plus TweenSheet:</p>
			<ul>
				<li><a href="/download/">Télécharger le script Fx.TweenSheet.js [1200kb] (nécéssite MooTools 1.2).</a></li>
				<li><a href="/docs/">Comprendre les options et l'utilisation de TweenSheet.</a></li>
				<li><a href="/demo/">Jouer avec TweenSheet sur la page de démo.</a></li>
			</ul>
			
			
			
			
			
			
		</div>

		<script src="http://www.google.com/jsapi?key=<?php echo $googleKey;?>" type="text/javascript"></script>
		<script type="text/javascript">
			google.load("mootools", "1.3", {uncompressed:true});
			google.setOnLoadCallback(initialize);

			
			function initialize(){
				new MooRainbow("couleur", {
					id: 'mooRainbow',
					wheel: true,
					imgPath: 'css/skin/',
					onChange: function(color) {
						new Fx.TweenSheet().tween(".dynBg", "background-color", color.hex);
					},
					onComplete: function(color) {
						new Fx.TweenSheet().tween(".dynBg", "background-color", color.hex);
					}
				});
			}
	
		</script>
		<script src="/js/Fx.TweenSheet.js" type="text/javascript"></script>
		<script src="/js/Drag.js" type="text/javascript"></script>
		<script src="/js/Color.js" type="text/javascript"></script>
		<script src="/js/MooRainbow.js" type="text/javascript"></script>
	</body>
</html>
